<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="名称" prop="filename">
          <el-input
            v-model="queryParams.filename"
            placeholder="请输入名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <el-input
            v-model="queryParams.version"
            placeholder="请输入名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <div class="mb-[10px] flex">
        <el-button type="success" icon="plus" @click="handleAddClick()">新增</el-button>
        <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
          删除
        </el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" prop="id" />
        <el-table-column label="名称" prop="filename" />
        <el-table-column label="版本号" prop="version" />
        <el-table-column label="备注" prop="remark" />
        <el-table-column label="创建时间" prop="createdAt">
          <template #default="{ row }">{{ row.createdAt ? formatDate(row.createdAt) : '--' }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="primary" @click="handleDelete(row.id)">删除</el-button>
            <el-button link type="primary" @click="handleDownload(row)">下载</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="paging.page"
          v-model:page-size="paging.size"
          :page-sizes="[10, 20, 30, 50, 100]"
          :size="paging.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <AddForm ref="addFormRef" @refresh="handleQuery"/>
    <EditForm ref="editFormRef" @refresh="handleQuery"/>
  </div>
</template>

<script setup>
import EditForm from './editForm.vue';
import AddForm from './form.vue'
import { listApi, delApi, downloadApi } from '@/api/facility/script.api'
import { formatDate } from "@/utils";
import { saveAs } from 'file-saver'
import { useParamStore } from '@/store'
const route = useRoute();
const { setParams, getParams, removeFalsyValues } = useParamStore()
const name = route.fullPath
onMounted(() => {
  if(!!getParams(name)) {
    queryParams.value = getParams(name)
  }
})
const addFormRef = ref(null)

const paging = ref({
  size: 10,
  page: 1,
  total: 0,
})

const handleSizeChange = (e) => {
  paging.value.size = e
  getList()
}
const handleCurrentChange = (e) => {
  paging.value.page = e
  getList()
}

const ids = ref([])
const loading = ref(false)
const tableData = ref([])
const queryParams = ref({
  filename: void undefined,
  version: void undefined,
})
const handleQuery = () => {
  paging.value.page = 1
  paging.value.size = 10
  setParams(queryParams.value, name)
  getList()
}
const handleSelectionChange = (e) => {
  ids.value = e.map(item => item.id)
}

const handleAddClick = () => {
  addFormRef.value.handleOpen()
}

const editFormRef = ref(null)
const handleEdit = (row) => {
  addFormRef.value.handleOpen(row)
  // editFormRef.value.handleOpen(row)
}

const queryFormRef = ref(null)
const handleResetQuery = () => {
  queryFormRef.value.resetFields()
}

const handleDelete = (e) => {
  if(!e) {
    ElMessageBox.confirm(
      '是否确定删除选择行?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        delApi({ ids: ids.value }).then(res => {
          handleQuery()
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        })
      })
    return
  }
  ElMessageBox.confirm(
      '是否确定删除该行?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        delApi({ ids: [e] }).then(res => {
          handleQuery()
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        })
      })
}

const busies = ref(null)
const valids = ref(null)
const getList = () => {
  loading.value = true
  listApi({
    page: paging.value.page,
    size: paging.value.size,
    version: queryParams.value.version || void undefined,
    filename: queryParams.value.filename || void undefined,
    app: 'WA'
  }).then(res => {
    tableData.value = res.rows
    paging.value.total = res.count
  }).finally(() => {
    loading.value = false
  })
}

getList()

const handleDownload = (row) => {
  console.log(row)
  downloadApi({ ids: [row.id] }, '/' + row.id).then(res => {
    console.log(res, '下载')
    const blob = new Blob([res.data])
    const filename = decodeURIComponent(res.fileName)
    saveAs(blob, filename)
  })
}

</script>

<style scoped lang="scss">
.pagination{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
.autoRefresh{
  display: flex;
  align-items: center;
  margin-left: 20px;
}
</style>
